import { View, Text } from '@tarojs/components';
import dayjs from 'dayjs';
import Taro from '@tarojs/taro';
import './index.scss';

export default function ({ orderDetail }) {
  const { orderStatus, orderNumber, createDate, payDate, refoundTime, refoundNumber } = orderDetail;
  const copyText = () => {
    Taro.setClipboardData({
      data: orderNumber,
      success: () => {
        Taro.showToast({
          title: '复制成功',
        });
      },
    });
  };
  return (
    <View className="order-number section-block">
      {(orderStatus === 1 || orderStatus === 4) && (
        <View>
          <View className="order-no">
            <Text className="order-title">订单编号：</Text>
            <Text className="order-text">{orderNumber}</Text>
            <View className="copy-btn" onClick={copyText}>
              复制
            </View>
          </View>
          <View className="order-no">
            <Text className="order-title">创建时间：</Text>
            <Text className="order-text">{dayjs(createDate).format('YYYY-MM-DD HH:mm:ss')}</Text>
          </View>
        </View>
      )}
      {orderStatus >= 2 && orderStatus < 4 && (
        <View>
          <View className="order-no">
            <Text className="order-title">交易快照：</Text>
            <Text className="order-text">发生交易争议时，可作为判断依据</Text>
          </View>
          <View className="order-no">
            <Text className="order-title">订单编号：</Text>
            <Text className="order-text">{orderNumber}</Text>
            <View className="copy-btn" onClick={copyText}>
              复制
            </View>
          </View>
          <View className="order-no">
            <Text className="order-title">创建时间：</Text>
            <Text className="order-text">{dayjs(createDate).format('YYYY-MM-DD HH:mm:ss')}</Text>
          </View>
          {orderStatus > 1 && orderStatus < 4 && (
            <View className="order-no">
              <Text className="order-title">付款时间：</Text>
              <Text className="order-text">
                {payDate ? dayjs(payDate).format('YYYY-MM-DD HH:mm:ss') : '线下付款'}
              </Text>
            </View>
          )}
        </View>
      )}
      {(orderStatus === 5 || orderStatus === 6) && (
        <View>
          <View className="order-no">
            <Text className="order-title">售后单号：</Text>
            <Text className="order-text">{refoundNumber}</Text>
          </View>
          {orderStatus === 5 && (
            <View className="order-no">
              <Text className="order-title">申请时间：</Text>
              <Text className="order-text">{refoundTime}</Text>
            </View>
          )}
        </View>
      )}
    </View>
  );
}
